<template>
  <div ref="container" class="element-library-lib-list" @click.self="selectItemHandler(null)">
    <template v-for="rep in elementLibraryManager.elementLibraryItems">
      <ElementLibraryItem v-if="showVirtualNode(rep.id)"
                     :selectedItem="selectedItem"
                     :item="rep"
                     :key="rep.id"/>
    </template>
  </div>
</template>

<script>

  import ElementLibraryItem from "./ElementLibraryItem.vue";
  import {elementLibraryCmd} from "../../../Command/ElementLibrary/ElementLibraryCommand";
  import {eventBus} from "../../../eventbus/eventbus";
  import elementLibraryManager from "./js/ElementLibraryManager";

  export default {
    name: "ElementLibraryLib",
    props: ["selectedItem"],
    inject: ["selectItemHandler", "library"],
    components: {ElementLibraryItem},
    data() {
      return {
        elementLibraryManager,
      }
    },
    methods: {
      showVirtualNode(id) {
        return this.library || id !== "-1";
      },
      scrollPosition(top) {
        this.$refs.container.scrollTop = top;
      },
    },
    mounted() {
      // elementLibraryCmd.init(500, 240, 1000, () => {
      //   elementLibraryManager.initElementLibrary();
      // });
    },
  }
</script>

<style scoped>
  .element-library-lib-list {
    border: 1px solid var(--border-color3);
    height: 309px !important;
    position: relative;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-top: 0.375rem;
    overflow: auto;
    background-color: var(--bg-color6);
    padding: 0.25rem;
  }

  .element-library-lib-list::-webkit-scrollbar {
    width: 10px;
  }
</style>